<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop='unityId'>
					<!-- <unitParentSelect v-model='formInline.unityId' clearable :placeholder='prompt?.unityId'
						:style="{ width: '100%' }"/> -->
					<el-tree-select v-model='formInline.unityId' v-bind="$attrs" :data="datas" :props="propss"
						:render-after-expand="false" check-strictly @change="treeChange" />
				</el-form-item>
			</re-col>


			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.userId' prop='userId'>
					<!-- <IndivduaiSelect v-model='formInline.userId' :unityId="formInline.unityId" clearable :placeholder='prompt?.userId'
						:style='{ width: "100%" }'>

					</IndivduaiSelect> -->
					<!-- <el-input v-model.trim='formInline.userName' clearable :placeholder='prompt?.userName' /> -->
					<el-select clearable v-model="formInline.userId" :placeholder='prompt?.userId' style="width: 100%"
						@change="indivduChange">
						<el-option v-for="item in options" :key="item.id" :label="item.nickname" :value="item.id" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.familyName' prop='familyName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.familyName' clearable
						:placeholder='prompt?.familyName' />
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.city' prop='city'>
					<!-- <el-input v-model.trim='formInline.city' clearable :placeholder='prompt?.city' /> -->
					<el-cascader style="width: 100%;" :options="CityDatas.options" v-model="formInline.city"
						:show-all-levels="true"
						:props="{ multiple: false, checkStrictly: false, emitPath: true, value: 'label', label: 'label' }"
						@change="cityChange($event)" placeholder="请输入项目所在城市">
					</el-cascader>
				</el-form-item>
			</re-col>
			<re-col :value='12' :xs='24' :sm='24'>
				<el-form-item :label='titles?.address' prop='address'>


					<div class="flex w-[100%]">
						<el-input class="mr-[10px]" v-model.trim='formInline.address' clearable :maxlength="30"
							:show-word-limit="true" :placeholder='prompt?.address' />
						<el-button class="" type="primary" @click="mark">地图标记</el-button>
					</div>
				</el-form-item>
			</re-col> </el-row>
	</el-form>
</template>

<script setup lang="ts">
import { getIndivduaiSelectList } from '@/api/manage/Individual-management/Individual-users/index';
import { getUnitTree } from '@/api/manage/units-manager/units-manager/index';
import SjMap from "@/components/mapForm/map.vue"
import { addDialog } from "@/components/ReDialog";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/Individual-management/Individual-management/index';
import { regionData } from "element-china-area-data";
import { cloneDeep, isAllEmpty, deviceDetection, debounce } from "@pureadmin/utils";
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
const formRef = ref();
const options = ref([])
const list = ref([])
const labelMarkers = ref() //已经标记过的点位
const formState = reactive({
	center: [],
	drawingPoint: {}
	// area:[]
})
const CityDatas = reactive({
	options: regionData,
})
console.log("地图",usePageVariablesStoreHook().getPlatform());

type FormProps = {
	formInline: infoType,
	isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false
});
console.log('关闭弹框a', props);
const formRules = reactive(<FormRules>{
	unityId: [{ required: true, message: prompt?.unityId, trigger: 'blur' },],
	userId: [{ required: true, message: prompt?.userId, trigger: 'blur' },],
	familyName: [{ required: true, message: prompt?.familyName, trigger: 'blur' },],
	city: [{ required: true, message: prompt?.city, trigger: 'blur' },],
	address: [{ required: true, message: prompt?.address, trigger: 'blur' },],
});
const ruleFormRef = ref();
const datas = ref([]);
const unityId = ref()
const propss = {
	label: 'unityName',
	value: 'id',
	children: 'childs',
}

// 监听
watch(() => props.formInline.unityId, () => {
	unityId.value = props.formInline.unityId
	getIndivduaiSelectList({
		unityId: unityId.value
	}).then(res => {


		list.value = res.result.users
		options.value = list.value
	})

}, {
	deep: true,
	immediate: true
})
getUnitTree({ unityId: usePageVariablesStoreHook().getManage()?.unityId }).then(res => {
	datas.value.push(...res.result.data)
})

const treeChange = (e) => {
	// console.log("foofh", e);
	unityId.value = e
	props.formInline.userId = null
	getIndivduaiSelectList({
		unityId: e
	}).then(res => {


		list.value = res.result.users
		options.value = list.value
	})
}
const indivduChange = (e) => {
	// console.log("foofh", e);
	// if (e == undefined) {

	// }
}
// 开启弹窗
const openDialog = () => {
	formState.center = [props.formInline.lng, props.formInline.lat]
	addDialog({
		title: '地图标记',
		width: "800px",
		draggable: true,
		props: {
			center: formState.center,
			isEdit: true,
			showCreatePoly: false,
			labelMarkers: labelMarkers.value
		},
		fullscreen: deviceDetection(),
		fullscreenIcon: true,
		closeOnClickModal: false,
		contentRenderer: () => h(SjMap, {
			ref: formRef,
			"onUpdate:center": (val) => {
				formState.center = val
			},
		}),
		beforeSure: (done, { options }) => {
			function chores() {
				props.formInline.lng = formState.center[0]
				props.formInline.lat = formState.center[1]
				// console.log("提交的数据类型", props.formInline.markPoint);

				done(); // 关闭弹框
				// getinfo(); // 刷新表格数据
			}

			chores()
		}
	})

}
const mark = () => {

	openDialog()
}
const cityChange = (e) => { //城市选择
	props.formInline.city = e
}
function getRef() {
	return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
